<template>
  <div class="container">
    <div class="checkbox">
      <el-checkbox-group v-model="selectedList">
        <el-row>
          <el-col :span="24" v-for="item in checkList" :key="item.dirCode">
            <el-checkbox :label="item.dirCode" class="checkbox-single">{{
              item.dirName + ": " + showDetail(item.childrenParams)
            }}</el-checkbox>
          </el-col>
        </el-row>
      </el-checkbox-group>
    </div>
    <div class="button">
      <el-button type="primary" size="small" @click="confirm">确定</el-button>
      <el-button type="primary" size="small" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import qs from "qs";

export default {
  props: {
    algoCutRowid: {
      type: String,
    },
    algoCutTemplateId: {
      type: String,
    },
  },
  data() {
    return {
      checkList: [], // 复选框显示的内容
      selectedList: [], // 复选框选中内容
    };
  },
  methods: {
    async confirm() {
      // 拿到完整数据
      let t = this.selectedList.map((item) => {
        for (let i = 0; i < this.checkList.length; i++) {
          if (this.checkList[i].dirCode === item) {
            let childrenList = this.checkList[i].childrenParams.map(
              (childItem) => {
                return childItem.optName;
              }
            );
            return {
              name: this.checkList[i].dirName,
              parametersList: childrenList,
            };
          }
        }
      });

      if (this.$webview2.isWPF) {
        const uuid = this.$webview2.generateRandomUUID();
        await this.$webview2.sendWebView2(
          `/algoTemplateCondition/batchOptBfClearCondition?algoTemplateId=${this.algoCutTemplateId}&algoTemplateVersionId=${this.algoCutRowid}&type=1`,
          "post",
          "application/json;charset=UTF-8",
          t,
          false,
          uuid
        );
        await window.chrome.webview.addEventListener(
          "message",
          (e) => {
            let res = e.data.response;
            // TODO： 定制后台数据处理
            if (res.status === 200 && e.data.webInfo.requestId === uuid) {
              this.$message.success("保存成功");
              this.$emit("close");
            } else {
              this.$message.warning(res.msg);
            }
          },
          { once: true }
        );
      } else {
        const res = await this.$store.dispatch("algoCutConfirm", {
          algoTemplateVersionId: this.algoCutRowid,
          algoTemplateId: this.algoCutTemplateId,
          t: t,
          type: 1,
        });
        if (res.data.status === 200) {
          this.$message.success("保存成功");
          this.$emit("close");
        } else {
          this.$message.success("保存失败");
        }
      }
    },
    cancel() {
      this.$emit("close");
    },
    async getLightList() {
      if (this.$webview2.isWPF) {
        const uuid = this.$webview2.generateRandomUUID();
        await this.$webview2.sendWebView2(
          "/dictionary/TreeList",
          "get",
          "application/json;charset=UTF-8",
          qs.stringify(
            {
              dirCodes: "light_",
            },
            { indices: false }
          ),
          true,
          uuid
        );
        await window.chrome.webview.addEventListener(
          "message",
          (e) => {
            let res = e.data.response;
            // TODO： 定制后台数据处理
            if (res.status === 200 && e.data.webInfo.requestId === uuid) {
              this.checkList = res.data;
              // 拿到数据后回显复选框
              this.renderCheckbox();
            }
          },
          { once: true }
        );
      } else {
        const res = await this.$store.dispatch("getDicBydirCode", {
          dirCodes: "light_",
        });
        if (res.data.status === 200) {
          this.checkList = res.data.data;
          // 拿到数据后回显复选框
          this.renderCheckbox();
        }
      }
    },
    // 处理childrenParams显示其中每一项名称
    showDetail(list) {
      let showList = [];
      list.forEach((item) => {
        showList.push(item.optName);
      });
      return showList.join(",");
    },
    // 复选框的回显
    async renderCheckbox() {
      if (this.$webview2.isWPF) {
        const uuid = this.$webview2.generateRandomUUID();
        await this.$webview2.sendWebView2(
          "/algoTemplateCondition/getConditionByParams",
          "get",
          "application/json;charset=UTF-8",
          qs.stringify(
            { algoTemplateVersionId: this.algoCutRowid },
            { indices: false }
          ),
          true,
          uuid
        );
        await window.chrome.webview.addEventListener(
          "message",
          (e) => {
            let res = e.data.response;
            // TODO： 定制后台数据处理
            if (res.status === 200 && e.data.webInfo.requestId === uuid) {
              this.selectedList = res.data.map((item) => {
                let findItem = this.checkList.find((ele) => {
                  if (item.name === ele.dirName) {
                    return ele;
                  }
                });
                return findItem.dirCode;
              });
            } else {
              this.$message.warning("获取失败");
            }
          },
          { once: true }
        );
      } else {
        const res = await this.$store.dispatch(
          "getCheckboxList",
          this.algoCutRowid
        );
        if (res.data.status === 200) {
          this.selectedList = res.data.data.map((item) => {
            let findItem = this.checkList.find((ele) => {
              if (item.name === ele.dirName) {
                return ele;
              }
            });
            return findItem.dirCode;
          });
        } else {
          this.$message.warning("获取失败");
        }
      }
    },
  },
  created() {
    setTimeout(() => {
      this.getLightList();
    }, 200);
  },
};
</script>

<style lang="less">
.button {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.checkbox-single {
  margin-bottom: 20px;
}
</style>